(function(window){
    //获取 店铺选项
    const shopList = document.querySelector('.from > .infoB')
    //获取 商品 盒子
    const message = document.querySelector('#product > .info')
    //获取 地区选项
    const region = document.querySelector('.from > .show')
    //获取 顶层选项 盒子
    const info = document.querySelector('.cityInfo')

    const shop = document .querySelector('.shop > #active')
    
    let shopid = 0;
    let areaid = 0;
    
    //获取 店铺 数据
    getShop()
    function getShop(){
        ajax({
            url:'http://chst.vip:1234/api/getgsshop',
            success(res){
                res = res.result
                binlist(res)
            }
        })
    }

    //动态渲染 店铺数据
    function binlist(res){
        let str = ''
        res.forEach((item,index) =>{
            str += `
            <li class=${item.shopId}>${item.shopName}</li>
            `
        })

        shopList.innerHTML = str
    }

    getshopbox()
    function getshopbox(){
        ajax({
            url:`http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0`,
            success(res){
                res = res.result
                getshoplist(res)
            }
        })
    }
    //获取 店铺商品 数据
    shopList.addEventListener('click',e =>{
        e = e || window.event
        const target = e.target;

        document.querySelector('#active').innerText = target.innerText

        if (areaid) {
            areaid = areaid
        }else{
            areaid = 0
        }
        
       ajaxFn(target.className,areaid)
        if(target.className === 's-shop' && j % 2 === 1){
            shopList.style.display = 'block'
        }else{
           shopList.style.display = 'none'
        }
      
    })


    function ajaxFn(shopid,areaid) {
        ajax({
            url:`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`,
            success(res){
                res = res.result
                getshoplist(res)
            }
        })
        
    }

        //渲染 店铺商品 数据
       function getshoplist(res){
            let str = ''
            res.forEach((item,index) =>{
                str += `
                <li>
                <a href="">
                    <img src="" alt="">
                    <div class="title">
                        廿一客(21cake)专用餐具 1人份(不单独配送)
                    </div>
                    <p class="price">￥0.50</p>
                </a>
            </li>
                `
            })
            getshop()
            message.innerHTML = str
       }
    
       // 获取 地区 数据
       getRegion()
       function getRegion(){
           ajax({
               url:'http://chst.vip:1234/api/getgsshoparea',
               success(res){
                   res = res.result
                   viewList(res)
               }
           })
       } 

       //渲染 地区 数据
       function viewList(res){
           let str = ''
           res.forEach((item,index) =>{
               str +=`
               <li class = ${item.areaId}>${item.areaName}</li>
               `
           })
           region.innerHTML = str
       }

       getregionbox()
       function getregionbox(){
           ajax({
               url:`http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0`,
               success(res){
                   res = res.result
                   getshoplist(res)
               }
           })
       }

       //获取 地区商品 信息
       region.addEventListener('click',e =>{
        e = e || window.event
        const target = e.target;
        let tr = target.innerText
        let arr = tr.slice(0,2)
        document.querySelector('#spanactive').innerText = arr
        if (shopid) {
            shopid = shopid
        }else{
            shopid = 0
        }
        ajaxFn(shopid,target.className)
        if(target.className === 's-shop' && j % 2 === 1){
            shopList.style.display = 'block'
        }else{
           shopList.style.display = 'none'
        }if (target.className === 'spanbox' && j % 2 === 1) {
         region.style.display = 'block'
        } else {
         region.style.display = 'none'  
        }
    })

        //渲染 地区 商品信息    
       function getshoplist(res){
            let str = ''
            res.forEach((item,index) =>{
                str += `
                <li>
                <a href="">
                <div class="img"><img src="${item.productImg}" alt=""></div>
                    <div class="title">
                        ${item.productName}
                    </div>
                    <p class="price">${item.productPrice}</p>
                </a>
            </li>
                `
            })
            message.innerHTML = str
       }



       //判断点击次数，控制下拉菜单开关
       let j = 0;
       info.addEventListener('click',e =>{
           j++;
           e = e || window.event
           const target = e.target
           if(target.className === 's-shop' && j % 2 === 1){
               shopList.style.display = 'block'
           }else{
              shopList.style.display = 'none'
           }if (target.className === 'spanbox' && j % 2 === 1) {
            region.style.display = 'block'
           } else {
            region.style.display = 'none'  
           }
          
       })

       



})(window)